<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#canvas {
	background-color: #9CF;
}
</style>
</head>

<body>
<canvas id="canvas" height="800" width="800">
</canvas>   
<script type="text/javascript">
var eleCan = document.getElementById("canvas");
var g2d = eleCan.getContext("2d");
g2d.fillRect(0,0,eleCan.width, eleCan.height);
var r = 20;
var dr = 5;
var x = 400;
var y = 400;
function fillCircle(t2d,x,y,r,color)
{
	t2d.beginPath();
	t2d.arc(x,y,r,0,2*Math.PI);
	t2d.closePath();
	t2d.fill();
	t2d.fillStyle = color;
};
function drawLine(stx,sty,edx,edy,linewid,strcolor)
{
	g2d.beginPath();
	g2d.moveTo(stx+0.5,sty+0.5);
	g2d.lineTo(edx+0.5,edy+0.5);
	g2d.closePath();
	g2d.lineWidth = linewid;
	g2d.strokeStyle = strcolor;
	g2d.stroke();
}
setInterval(drawDandelion,1000/60)
var s = 0;
function drawDandelion()
{
	g2d.clearRect(0,0,canvas.width,canvas.height);
	fillCircle(g2d,x,y,r,"#e6f8f5");
	var dancolor = "#e6f8f5"
	var linewid = 1;
	var cirdiv = 28;
	var dL = 10*r;
	var R = 200;
	for(var i=0; i<cirdiv; i++)
	{
		var ex = x + Math.cos(2*Math.PI/cirdiv*i+s/360)*R;
		var ey = y + Math.sin(2*Math.PI/cirdiv*i+s/360)*R;
		drawLine(x,y,ex,ey,linewid,dancolor);
		var cirdiv2 = 14;
		for(var m=0; m<cirdiv2; m++)
			{
				var rotspeed = 2;
				fillCircle(g2d,ex,ey,dr,dancolor);
				var shrradio = 0.1;
				var ex2 = ex + Math.cos(2*Math.PI/cirdiv2*m+5*s/360)*R*shrradio;
				var ey2 = ey + Math.sin(2*Math.PI/cirdiv2*m+5*s/360)*R*shrradio;
				drawLine(ex,ey,ex2,ey2,linewid,dancolor);
			}
	}
	s++;
};
</script>
</body>
</html>
